<template>
  <!-- 具备一个宽高的dom -->
  <div
    ref="main"
    style="width: 100%; height: 879px; margin: 0; padding: 0"
    @dblclick="revertMap"
  ></div>
</template>

<script>
  // 导入echarts
  import * as echarts from 'echarts';
  // 中国地图
  // import chianJson from '@/map/china.json'
  import chianJson from '../../../../assets/maps/china.json';

  export default {
    name: 'ChinaMap',
    data() {
      return {
        chart: '',
      };
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart();
        window.addEventListener('resize', this.screenAdapter);
        this.screenAdapter();
      });
    },
    methods: {
      initChart() {
        const dataList = [
          {
            name: '南海诸岛',
            value: 0,
            eventTotal: 100,
            specialImportant: 10,
            import: 10,
            compare: 10,
            common: 40,
            specail: 20,
          },
          {
            name: '北京',
            value: 0,
          },
          {
            name: '天津',
            value: 0,
          },
          {
            name: '上海',
            value: 10,
          },
          {
            name: '重庆',
            value: 20,
          },
          {
            name: '河北',
            value: 30,
          },
          {
            name: '河南',
            value: 0,
          },
          {
            name: '云南',
            value: 0,
          },
          {
            name: '辽宁',
            value: 0,
          },
          {
            name: '黑龙江',
            value: 40,
          },
          {
            name: '湖南',
            value: 0,
          },
          {
            name: '安徽',
            value: 0,
          },
          {
            name: '山东',
            value: 50,
          },
          {
            name: '新疆',
            value: 0,
          },
          {
            name: '江苏',
            value: 0,
          },
          {
            name: '浙江',
            value: 0,
          },
          {
            name: '江西',
            value: 0,
          },
          {
            name: '湖北',
            value: 0,
          },
          {
            name: '广西',
            value: 0,
          },
          {
            name: '甘肃',
            value: 0,
          },
          {
            name: '山西',
            value: 0,
          },
          {
            name: '内蒙古',
            value: 0,
          },
          {
            name: '陕西',
            value: 0,
          },
          {
            name: '吉林',
            value: 0,
          },
          {
            name: '福建',
            value: 0,
          },
          {
            name: '贵州',
            value: 0,
          },
          {
            name: '广东',
            value: 0,
          },
          {
            name: '青海',
            value: 0,
          },
          {
            name: '西藏',
            value: 0,
          },
          {
            name: '四川',
            value: 0,
          },
          {
            name: '宁夏',
            value: 0,
          },
          {
            name: '海南',
            value: 0,
          },
          {
            name: '台湾',
            value: 0,
          },
          {
            name: '香港',
            value: 0,
          },
          {
            name: '澳门',
            value: 0,
          },
        ];

        // init第一个参数 ref定义的的，第二个参数主题
        this.chart = echarts.init(this.$refs.main);
        echarts.registerMap('chain', chianJson);
        this.chart.setOption({
          title: {
            text: '地理热图',
            left: 20,
            top: 20,
          },
          visualMap: {
            show: true,
            type: 'continuous',
            min: 0,
            max: 100,
            left: 0,
            top: 0,
            itemGap: 0,
            showLabel: true,
            realtime: false,
            itemWidth: 12,
            itemHeight: 90,
            calculable: true,
          },

          geo: {
            type: 'map', // 类型
            map: 'chain',
            roam: true,
            top: '5%', // 距离顶部
            bottom: '5%', // 距离底部
            itemStyle: {
              // 地图区域的样式。
              areaColor: '#2E72BF', // 地图整体区域的颜色
              borderColor: '#333', // 地图边界线的颜色
            },
          },

          // geo: {
          //   type: 'map',
          //   map: 'chain',
          //   scaleLimit: {
          //     min: 1,
          //   },
          //   zoom: 1,
          //   roam: true,
          //   top: 30,
          //   bottom: 10,
          //   label: {
          //     normal: {
          //       show: true,
          //       fontSize: "8",
          //       color: "rgba(0,0,0)",
          //     },
          //   },
          //   itemStyle: {
          //     normal: {
          //       borderColor: "rgba(0, 0, 0, 0.2)",
          //     },
          //     emphasis: {
          //       areaColor: "#f2d5ad",
          //       shadowOffsetX: 0,
          //       shadowOffsetY: 0,
          //       borderWidth: 0,
          //     },
          //   },
          // },

          // 自定义提示框的内容

          // tooltip: {
          //   trigger: 'item',
          //   // 自定义提示框的内容
          //   formatter(params) {
          //     return (
          //         `<div>${
          //             params.data.name
          //         } <br> ${
          //             params.seriesName
          //         }</div>`
          //     );
          //   }
          // },

          tooltip: {
            triggerOn: 'mousemove', // mousemove、click
            padding: 8,
          },
          // 散点图
          series: [
            {
              data: [
                {
                  name: '南海诸岛',
                  value: 0,
                  eventTotal: 100,
                  specialImportant: 10,
                  import: 10,
                  compare: 10,
                  common: 40,
                  specail: 20,
                },
                {
                  name: '北京',
                  value: 0,
                },
                {
                  name: '天津',
                  value: 0,
                },
                {
                  name: '上海',
                  value: 10,
                },
                {
                  name: '重庆',
                  value: 20,
                },
                {
                  name: '河北',
                  value: 30,
                },
                {
                  name: '河南',
                  value: 0,
                },
                {
                  name: '云南',
                  value: 0,
                },
                {
                  name: '辽宁',
                  value: 0,
                },
                {
                  name: '黑龙江',
                  value: 40,
                },
                {
                  name: '湖南',
                  value: 0,
                },
                {
                  name: '安徽',
                  value: 0,
                },
                {
                  name: '山东',
                  value: 50,
                },
                {
                  name: '新疆',
                  value: 0,
                },
                {
                  name: '江苏',
                  value: 0,
                },
                {
                  name: '浙江',
                  value: 0,
                },
                {
                  name: '江西',
                  value: 0,
                },
                {
                  name: '湖北',
                  value: 0,
                },
                {
                  name: '广西',
                  value: 0,
                },
                {
                  name: '甘肃',
                  value: 0,
                },
                {
                  name: '山西',
                  value: 0,
                },
                {
                  name: '内蒙古',
                  value: 0,
                },
                {
                  name: '陕西',
                  value: 0,
                },
                {
                  name: '吉林',
                  value: 0,
                },
                {
                  name: '福建',
                  value: 0,
                },
                {
                  name: '贵州',
                  value: 0,
                },
                {
                  name: '广东',
                  value: 0,
                },
                {
                  name: '青海',
                  value: 0,
                },
                {
                  name: '西藏',
                  value: 0,
                },
                {
                  name: '四川',
                  value: 0,
                },
                {
                  name: '宁夏',
                  value: 0,
                },
                {
                  name: '海南',
                  value: 0,
                },
                {
                  name: '台湾',
                  value: 0,
                },
                {
                  name: '香港',
                  value: 0,
                },
                {
                  name: '澳门',
                  value: 0,
                },
              ],
              name: '地区分布',
              type: 'map',
              roam: true,
              geoIndex: 0,
            },
          ],
          // legend: { // 图例组件
          //   left: '5%',
          //   bottom: '5%',
          //   orient: 'vertical', // 竖着排列
          //   data: ['一线城市', '二线城市', '三线城市']
          // },
        });
        // this.chart.on('click', async arg =>{
        //   // const provinceInfo = getProvinceMapInfo(arg.name)
        //   // 如果存在key执行下面内容
        //   if(provinceInfo.key !== undefined){
        //     var url = window.location.origin + provinceInfo.path
        //     // 获取static下面的json数据
        //     const res = await axios.get(url)
        //     echarts.registerMap(provinceInfo.key, res.data)
        //     const changeOption={
        //       geo:{
        //         map: provinceInfo.key
        //       }
        //     }
        //     this.chart.setOption(changeOption)
        //   }
        // })

        // this.chart.on('click', async arg =>{
        //   // const provinceInfo = getProvinceMapInfo(arg.name)
        //   // 如果存在key执行下面内容
        //   if(provinceInfo.key !== undefined){
        //     var url = window.location.origin + provinceInfo.path
        //     // 获取static下面的json数据
        //     const res = await axios.get(url)
        //     echarts.registerMap(provinceInfo.key, res.data)
        //     const changeOption={
        //       geo:{
        //         map: provinceInfo.key
        //       }
        //     }
        //
        //   }
        // })
      },
      // 当浏览器的大小发生变化的时候，会调用此方法来完成适配
      screenAdapter() {
        // 获取自适应大小
        const titleFontSize = (this.$refs.main.offsetWidth / 100) * 3.6;
        console.log('titleFontSize', titleFontSize);
        // 自适应配置
        const adapterOption = {
          title: {
            textStyle: {
              fontSize: titleFontSize, // 自适应字体大小
            },
          },
          legend: {
            // 图例组件
            itemWidth: titleFontSize / 2,
            itemHeight: titleFontSize / 2,
            itemGap: titleFontSize / 2,
            textStyle: {
              fontSize: titleFontSize / 2, // 自适应字体大小
            },
          },
        };
        this.chart.setOption(adapterOption);
        // 自适应
        this.chart.resize();
      },
      // 回退
      revertMap() {
        const revertOption = {
          geo: {
            map: 'chain',
          },
        };
        this.chart.setOption(revertOption);
      },
    },
  };
</script>

<style lang="less" scoped>
  .dashboard-container {
    width: 100%;
    height: 100%;
  }
</style>
